<!DOCTYPE html>
<html lang="zh">

<head>
  <%=require('html-loader!./layout/head-common.html') %>
    <title>书籍分类</title>

</head>

<body>
  <%=require('html-loader!./layout/nav.html') %>
    <main class="container">
      <div class="row">
        <div class="border-0 col-lg-3 col-12 mainLeft">
          <div class="card categoryUl" id="category-div">
            <a href="./category.html" class="text-muted">
              <li class="category">全部类别</li>
            </a>
            <a href="./category.html?categoryId=1&content=心理学入门" class="text-muted">
              <li class="category">心理学入门</li>
            </a>
            <a href="./category.html?categoryId=2&content=青少年心理学" class="text-muted">
              <li class="category">青少年心理学</li>
            </a>
            <a href="./category.html?categoryId=3&content=应用心理学" class="text-muted">
              <li class="category">应用心理学</li>
            </a>
            <a href="./category.html?categoryId=4&content=认知心理学" class="text-muted">
              <li class="category">认知心理学</li>
            </a>
            <a href="./category.html?categoryId=5&content=生理心理学" class="text-muted">
              <li class="category">生理心理学</li>
            </a>
            <a href="./category.html?categoryId=6&content=社会心理学" class="text-muted">
              <li class="category">社会心理学</li>
            </a>
          </div>
        </div>
        <div class="mainRight border-0 col-lg-9 col-12">
          <div class="card border-0">
            <div class="row">
              <div class="col-md-6 col-sm-6 col-12 searchWrap">
                <input type="text" class="form-control border-danger">
                <a href="#" class="btn text-danger active search">
                  <span class="fa fa-search"></span> 搜索</a>
              </div>
              <div class="col-md-6 col-sm-6 col-12 sortBtns">
                <a href="#" data-sort="up" class="btn text-danger" id="price-asc">按价格升序</a>
                <a href="#" data-sort="down" class="btn text-danger" id="price-desc">按价格降序</a>
              </div>
            </div>
          </div>
          <div class="row" style="margin-top: 2rem;" id="categoryContent">
          </div>
          <nav id="naginationNav" data-type="article-pagination">
          </nav>
        </div>
      </div>
    </main>
    <%=require('html-loader!./layout/footer.html') %>
      <script>
        $(".nav-item").eq(1).addClass("active")
      </script>
</body>

</html>